<!--
 * @Author: Zhang Yingying
 * @Date: 2020-11-06 22:30:16
 * @LastEditors: Zhang Yingying
 * @LastEditTime: 2020-11-12 22:31:16
-->
<template>
  <el-dialog
    :visible.sync="visible"
    title="用户管理"
    :before-close="handleClose"
  >
    <el-form label-width="80px">
      <el-form-item label="账户类型">
        <form-control
          :style="{ width: '100%' }"
          type="select"
          :options="roles"
          v-model="form.role"
          placeholder="请账户类型"
        ></form-control>
      </el-form-item>
      <el-form-item label="账户">
        <form-control
          type="text"
          v-model="form.account"
          placeholder="请输入账户"
        ></form-control>
      </el-form-item>
      <el-form-item label="用户名">
        <form-control
          type="text"
          v-model="form.username"
          placeholder="请输入用户名"
        ></form-control>
      </el-form-item>
      <el-form-item label="密码">
        <form-control
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
        ></form-control>
      </el-form-item>
      <el-form-item label="重复密码">
        <form-control
          type="password"
          v-model="form.repassword"
          placeholder="请输入重复密码"
        ></form-control>
      </el-form-item>
      <el-form-item label="联系电话">
        <form-control
          type="text"
          v-model="form.telephone"
          placeholder="请输入联系电话"
        ></form-control>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          :limit="1"
          action=""
          ref="upload"
          :file-list="fileList"
          :on-remove="handleRemove"
          :http-request="httpRequest"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        确定
      </el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import assetApi from '@/api/AssetApi'
  import userApi from '@/api/UserApi'
  import { roles } from '@/config/business'
  export default {
    name: 'AssetsDialog',
    data() {
      return {
        visible: false,
        form: {
          account: '',
          role: '',
          password: '',
          repassword: '',
          username: '',
          telephone: '',
          avatar: '',
        },
        avatar: '',
        roles,
        fileList: [],
        loading: false,
      }
    },
    computed: {
      upload() {
        return this.$refs.upload
      },
    },
    methods: {
      httpRequest(args) {
        this.avatar = args.file
      },
      handleRemove() {
        this.form.avatar = null
      },
      openDialog(contextData) {
        if (contextData) {
          Object.assign(this.form, contextData || {})
          this.fileList = [{ name: contextData.assetName }]
        }

        this.visible = true
      },
      closeDialog() {
        this.visible = false
        this.upload && this.upload.clearFiles()
        this.fileList = []
        Object.assign(this.form, {
          id: null,
          account: '',
          role: '',
          password: '',
          repassword: '',
          username: '',
          telephone: '',
          avatar: '',
        })
      },
      handleClose() {
        this.closeDialog()
      },
      async handleSubmit() {
        try {
          this.loading = true
          //如果有头像了的话 ，就可以直接修改了
          let model = { ...this.form }
          if (!this.form.avatar) {
            let formData = new FormData()
            formData.append('file', this.avatar)
            let upload = await assetApi.create(formData)
            if (upload && upload.code != 0) {
              this.$message.error('头像上传失败,无法新增用户!')
              return
            }
            model.avatar = upload.data.id
          }
          let resp = await (model.id
            ? userApi.update(model)
            : userApi.create(model))
          if (resp && resp.code == 0) {
            this.$message.success((model.id ? '编辑' : '新增') + '用户成功!')
            this.closeDialog()
            this.$emit('change')
          }
        } catch (exp) {
          this.$message.error((this.form.id ? '编辑' : '新增') + '用户失败!')
          console.error(exp)
        } finally {
          this.loading = false
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
